<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Slideshow</title>

<style type="text/css">
#slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;}
#slideshow img{position:absolute;top:0;left:0;z-index:8;opacity:1.0;height:195px;overflow:hidden;background-color:#FFF;}
#slideshow img.current{z-index:10;}
#slideshow img.prev{z-index:9;}
</style>


<div id="slideshow">
       <img src="1.jpg" alt="" />
       <img src="2.jpg" alt="" />
       <img src="3.jpg" alt=""/>
       <img src="4.jpg" alt="" />
      <img src="5.jpg" alt="" />
       
</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
function slideSwitch() {

	// 判断div.current个数为0的时候 $current的取值
	var $current = $("#slideshow img.current").length == 0 ? $("#slideshow img:last") : $("#slideshow img.current");
	
	// 判断div.current存在时则匹配$current.next(),否则转到第一个div
	var $next =  $current.next().length ? $current.next() : $("#slideshow img:first");
	
	//$current.addClass('prev');
	
	$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
			//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
			$current.removeClass("current prev");
	});
}

$(function() {
	// 设定时间为3秒(1000=1秒)
    setInterval( "slideSwitch()", 3000 ); 
});
</script>

</body>
</html>
